<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>

        .toast-center-center {
            left: 50%;
            top: 40%;
            transform: translate(-50%,-50%);
        }

    </style>
    <style>
        .all {
            width: 800px;
            box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
            margin: auto;
            margin-top: 5%;
            display: flex;
            border-radius: 35px;
            background-color: #ffffff;
            height: 550px;
        }
        .log {
            width: 50%;
            margin: auto;
        }
        .reg {
            width: 50%;
            height: 100%;
            margin: auto;
            background-color: #20b2aa;
            border-radius: 35px;
            color: #ffffff;
        }
        .reg_1 {
            text-align: center;
            margin: auto;
            margin-top: 50%;
        }
        .reg_1 h2 {
            font-weight: 700;
        }
        .reg_1 p {
            margin: 15px 0px 25px 0px;
        }
        .sig {
            width: 70px;
            height: 30px;
            border-radius: 12px;
            background-color: #20b2aa;
            border-color: #fff;
            color: #ffffff;
        }
        #tiao {
            padding: 0em 0;
        }
        .reg_1 a {
            color: #ffffff;
        }
        h3 {
            font-size: 3em;
            color: black;
            padding-bottom: 1em;
            margin: 0;
            text-align: center;
            font-family: "Marvel-Regular";
        }
        .input {
            margin: 10px 50px;
            width: 300px;
            height: 70px;
        }

        span {
            color: #999;
            font-size: 0.85em;
            padding-bottom: 0.2em;
            display: block;
            text-transform: uppercase;
            margin-bottom: 4px;
            margin-top: -5px
        }
        .input-text {
            border: 1px solid #555;
            outline-color: #fd9f3e;
            width: 90%;
            font-size: 1em;
            padding: 0.5em;
            line-height: inherit;
        }
        .input-text-trycode {
            border: 1px solid #555;
            outline-color: #fd9f3e;
            width: 50%;
            font-size: 1em;
            padding: 0.5em;
            line-height: inherit;
        }
        .register-top-grid {
            color: black;
            padding-bottom: 1em;
            margin: 0;
            font-family: "Marvel-Regular";
            margin: 10px 0;
        }
        .text-center {
            text-align: center;
        }
        .tijiao {
            color: rgb(255, 253, 253);
            width: 80px;
            height: 35px;
            background-color: rgb(241, 52, 10);
            border: none;
        }
    </style>
</head>
<body>
<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<div class="all">
    <div class="log">
        <div class="register">
            <form>
                <div class="register-top-grid">
                    <h3>找回密码</h3>
                    <div class="input">
                        <span>用户名 <label style="color: red">* </label></span>
                        <input
                                type="text"
                                v-model="name"
                                placeholder="请输入用户名"
                                class="input-text"
                                id="userName"
                        />
                    </div>
                    <div class="input">
                        <span>邮箱 <label style="color: red">*</label></span>
                        <input
                                type="text"
                                v-model="name"
                                placeholder="请输入邮箱地址"
                                class="input-text"
                                id="email"
                        />
                    </div>
                    <div class="input">
                        <span>验证码 <label style="color: red">* </label></span>
                        <input
                                type="text"
                                v-model="trycode"
                                placeholder="请输入验证码"
                                class="input-text-trycode"
                                id="key"
                        />
                    </div>
                    <div class="input">
                        <span>新密码 <label style="color: red">*</label></span>
                        <input
                                type="password"
                                v-model="password"
                                placeholder="请输入新密码"
                                class="input-text"
                                id="newPassword1"
                        />
                        <span hidden id="error-log-password1"></span>
                    </div>
                    <div class="input">
                        <span>新密码 <label style="color: red">*</label></span>
                        <input
                                type="password"
                                v-model="password"
                                placeholder="请再次输入新密码"
                                class="input-text"
                                id="newPassword2"
                        />
                        <span hidden id="error-log-password2"></span>
                    </div>
                </div>
                <div class="text-center">
                    <input
                            type="button"
                            value="提交"
                            class="tijiao"
                            id="key-submit"
                    />
                </div>
            </form>
        </div>
    </div>
    <div class="reg">
        <div class="reg_1">
            <h2>已有账号？</h2>
            <p>立即登录加入我们吧，和我们一起开启旅程吧</p>
            <a href="/login">
                <button type="primary" class="sig">返回</button>
            </a>
        </div>
    </div>
</div>
<script>
    $(function() {
        var wait =60;
        toastr.options = {
            "closeButton": true,// 是否显示关闭按钮
            "positionClass": "toast-center-center",// 弹出窗的位置
            "showDuration": "1000",// 显示的动画时间
            "hideDuration": "1000",// 消失的动画时间
            "timeOut": "1500",// 弹窗展现时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut", //消失时的动画方式
            "allowHtml":true,// 允许弹窗内容包含 HTML 语言
        };

        function time(o) {
            if (wait === 0) {
                o.removeAttribute("disabled");
                o.value = "获取验证码";
                wait = 60;
            }else {
                o.setAttribute("disabled",true);
                o.value = "重新发送(" + wait + "s)";
                wait--;
                setTimeout(function() {
                    time(o);
                },1000)
            }
        }
        $("#key").click(function() {
            if ($("#userName").val() === "" || $("#email").val() === "") {
                toastr.warning('请输入用户名和邮箱地址！');
                return;
            }

        });
        $("#newPassword1").blur(function() {
            var reg = /^[a-zA-z0-9]{6,12}$/;
            if (this.value === ""){
                $('#error-log-password1').show().text('请输入密码').css("color","red");
                return false;
            }
            if (reg.test(this.value) === false) {
                $('#error-log-password1').show().text('密码必须为6-12位字符型数据').css("color","red");
                return false;
            }else {
                $('#error-log-password1').hide();
            }
        });
        $("#newPassword2").blur(function() {
            var password = $("#newPassword1").val();
            if (password === ""){
                $('#error-log-password2').show().text('请输入密码').css("color","red");
                return false;
            }
            if (password !== this.value) {
                $('#error-log-password2').show().text('两次输入密码不一致').css("color","red");
                return false;
            }else {
                $('#error-log-password2').hide();
            }
        });
        $("#key-submit").click(function() {
            if ($("#userName").val() === "" || $("#email").val() === "" || $("#key").val() === "" || $("#newPassword1").val() === "" || $("#newPassword2").val() === ""){
                toastr.warning('请输入相关信息！');
                return;
            }
            $.ajax({
                url : "/user/updatePwdByKey",
                type : "post",
                data : {
                    userName : $("#userName").val(),
                    email : $("#email").val(),
                    key : $("#key").val(),
                    password : $("#newPassword1").val(),
                },
                dataType : "json",
                success : function(data) {
                    if (data.state === 200){
                        // window.open("/login","_blank");
                        // window.close();
                        toastr.success('修改成功！');
                        $("#userName").val("");
                        $("#email").val("");
                        $("#key").val("");
                        $("#newPassword1").val("");
                        $("#newPassword2").val("");

                    }else {
                        toastr.error(data.message);
                    }
                }
            })
        })
    })
</script>
</body>
</html>
